<script setup lang="ts">

import Navigator from "../components/NavigatorRoot.vue";
import HeaderTitle from "../components/HeaderTitle.vue";
import {ref,reactive} from "vue";
import router from "../Router";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import {TaskForm, tempTaskAssign} from "../store/taskStore.ts";
import {getUserById, getUserByRole} from "../network/userApi.ts";
import {assignTask, getCode, getTaskById, getType, updateTask} from "../network/taskApi.ts";
import {FALSE} from "ol/functions";
import {currentRoleIndex, navigatorDict} from "../utils/UserUtils.ts";

console.log("localStorage.getItem(\"currentRoleIndex\"):",localStorage.getItem("currentRoleIndex"))
currentRoleIndex.value = localStorage.getItem("currentRoleIndex") ? localStorage.getItem("currentRoleIndex") : 5

</script>

<template>
  <div class="flex flex-col h-full w-full fixed top-0 right-0  bg-gray-2 gap-2">
    <header-title></header-title>
    <div class="flex grow gap-2">
      <component :is="navigatorDict[currentRoleIndex]" class="w-38"></component>

      <div class="ml-40 bg-white grow h-full flex flex-col">
        <div class="flex justify-start items-center gap-3 h-12 ml-5">
          <div class="border-#84b9bf rounded-full border-1 border-solid w-5 h-5"></div>
          <div class="flex justify-center items-center text-5 text-bold">进行任务审核，任务编号为 ？？ </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
input[type=radio]{
  width: 16px;
  height: 16px;
  margin-top: 2px;
  position: relative;
}
input[type=radio]::after {
  position: absolute;
  top: 0;
  color: #000;
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: ' ';
  border-radius: 100%;
}
input[type=radio]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  background-color: #42BEAD;
}




</style>